<!DOCTYPE html>
<html>
<head>
	<title>KDT</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=deivce-width,initial-scale=1.0">
	<script src="/kdt.js"></script>
	<script src="/vue.js"></script>
	<script type="text/javascript">
		function initialData() {
			var pid=location.href.split('?')[1].split('&')[0].split('=')[1]
			window.app.ProductId=pid
			console.log('pid='+pid)
			var xhr=new XMLHttpRequest()
			xhr.onload=function(e) {
				if (this.status==200||this.status==304) {
					var o=JSON.parse(xhr.responseText)
					if (o.State=="OK") {
						window.app.Price=o.P.Price
						window.app.Title=o.P.Title
						window.app.Intro=o.P.Intro
						window.app.Name=o.P.Name
					}else {
						alert(o.Info)
					}
				}
			}
			xhr.open('POST', '/apis/product/query',true)
			var o=new Object()
			o.State=pid
			xhr.send(JSON.stringify(o))
		}
		function addPack(me) {
			me.value='ordering ...'
			var xhr=new XMLHttpRequest()
			xhr.onload=function(e) {
				if (this.status==200||this.status==304) {
					var o=JSON.parse(xhr.responseText)
					if (o.State=="OK") {
						alert('购买成功 !!')
						location.href='/userPage.html'
					}else {
						alert(o.Info)
					}
					me.value='Buy now'
				}
			}
			var o=new Object()
			o.ProductId=window.app.ProductId
			o.Owner=getCookie('KDT-User-Sid')
			o.Num=1
			xhr.open('POST', '/apis/pack/add', true)
			xhr.send(JSON.stringify(o))
		}
		setTimeout('initialData()', 50)
	</script>
</head>
<body style="padding: 0px;margin: 0px;display: flex;flex-direction: column;align-items: center;">
<div id="main_container" style="display: flex;flex-direction: column;align-items: center;max-width: 500px;width: 100%;">
	<img v-bind:src='getCover()' style="width: 100%;">
	<h1 style="color: #aa0000;">{{Price}}¥</h1>
	<h1>{{Title}}</h1>
	<h5>{{Intro}}</h5>
</div>
<div style="position: fixed;bottom: 3px;width: 100%;align-items: center;display: flex;flex-direction: column;">
	<input type="button" value="立即购买" style="width: 100%;padding: 5px;background-color: #FF6D00;color: #fff;max-width: 500px;" onclick="addPack(this)">
</div>
<script type="text/javascript">
	window.app=new Vue({
		el:'#main_container',
		data:{
			ProductId:'',
			Price:0,
			getCover:function() {
				var pindex=new Number(location.href.split('&')[1].split('=')[1])
				console.log('pindex='+pindex.toString())
				return '/res/' + (pindex % 8 + 1).toString() + '.jpg'
			},
			Title:'',
			Intro:'',
			Name:''
		}
	})
</script>
</body>
</html>